<template>
    <v-navigation-drawer permanent>
        <v-card
            class="mx-auto"
            max-width="300"
        >
            <v-list density="compact">
                <v-list-subheader>Projects</v-list-subheader>

                <v-list-item
                    @click="detail(item.text)"
                    v-for="(item, i) in items"
                    :key="i"
                    :value="item"
                    color="blue"
                    rounded="shaped"
                >
                    <template v-slot:prepend>
                        <v-icon :icon="item.icon"></v-icon>
                    </template>

                    <v-list-item-title v-text="item.text"></v-list-item-title>
                </v-list-item>
            </v-list>
        </v-card>
    </v-navigation-drawer>
    <v-main style="min-height: 300px">
        <v-main style="padding: 0%; margin-top: 2%; min-height: 44px">
            <div class="d-flex">
                <v-btn
                    v-if="detailType"
                    prepend-icon="mdi-plus"
                    @click="dialog = true"
                    style="margin-left: 5%; height: 44px"
                >
                    New
                </v-btn>
                <div style="margin-left: 5%">
                    <div>{{ page }}</div>
                    <div style="font-size: 10px">
                        {{ this.CardData.length }} projects
                    </div>
                </div>
                <div style="position: absolute; right: 4%; width: 300px">
                    <v-card-text style="padding: 0%">
                        <v-text-field
                            density="compact"
                            variant="solo"
                            label=""
                            append-inner-icon="mdi-magnify"
                            v-model="searchContent"
                            @click:appendInner="search"
                        ></v-text-field>
                    </v-card-text>
                </div>
            </div>
        </v-main>
        <v-dialog
            v-model="dialog"
            persistent
            width="auto"
        >
            <v-card>
                <v-icon
                    @click="dialog = false"
                    style="position: absolute; right: 0%"
                    >mdi-close</v-icon
                >
                <span
                    style="
                        padding: 3% 0 0 50px;
                        font-size: large;
                        font-weight: 800;
                    "
                    >NEW PROJECT</span
                >
                <v-sheet
                    width="500"
                    class="mx-auto"
                    style="padding: 20px 50px 50px 50px"
                >
                    <v-form ref="form">
                        <v-text-field
                            v-model="title"
                            label="Title"
                            :rules="titleRules"
                        ></v-text-field>

                        <v-text-field
                            v-model="introduction"
                            label="introduction"
                        ></v-text-field>

                        <v-btn
                            @click="handleCreateCard"
                            block
                            class="mt-2"
                            >SUBMIT</v-btn
                        >
                    </v-form>
                </v-sheet>
            </v-card>
        </v-dialog>

        <v-divider
            class="border-opacity-100"
            style="margin: 2% 5% 2% 5%"
        ></v-divider>
        <v-main
            class=""
            style="padding: 0%"
        >
            <div
                class="d-flex"
                style="flex-wrap: wrap; padding-left: 6.4%"
            >
                <Card
                    v-for="cardData in CardData"
                    :key="cardData.id"
                    :cardData="cardData"
                    @handleCollectCard="handleCollectCard"
                    @handleDeleteCard="handleDeleteCard"
                    @handleModifyCard="handleModifyCard"
                    @toDesignPage="toDesignPage"
                    style="margin: 1%"
                ></Card>
            </div>
        </v-main>
    </v-main>
</template>
<style></style>
<script>
import Card from './components/Card.vue'
import { useManageStore } from '../../stores/manage.js'
import { useDesignStore } from '../../stores/design'
const projectManage = useManageStore()
export default {
    components: {
        Card
    },
    data() {
        return {
            designStore: useDesignStore(),
            dialog: false,
            items: [
                { text: 'Home', icon: 'mdi-home' },
                { text: 'Starred', icon: 'mdi-star' },
                { text: 'Trash', icon: 'mdi-delete' }
            ],
            CardData: [],
            title: '',
            titleRules: [
                (value) => {
                    let label = /^\s*$/
                    let reg = new RegExp(label)
                    if (value?.length > 0 && !reg.test(value)) return true
                    return 'Title cannot be empty'
                }
            ],
            introduction: '...',
            searchContent: '',
            detailType: true
        }
    },
    computed: {
        page() {
            return projectManage.page
        }
    },
    methods: {
        //获取项目
        GetCardData(getType) {
            this.CardData = []
            projectManage.getProject(getType).then((data) => {
                this.CardData = data.projects
            })
        },
        //新建项目
        async handleCreateCard() {
            const { valid } = await this.$refs.form.validate()
            if (valid) {
                this.dialog = false
                projectManage
                    .create(this.title, this.introduction)
                    .then((data) => {
                        this.GetCardData('All')
                    })
            }
        },
        //收藏项目
        handleCollectCard(project_id) {
            projectManage.collect(project_id).then((data) => {
                if (this.page === 'Starred') {
                    this.GetCardData('collect')
                }
            })
        },
        //删除或者恢复项目
        handleDeleteCard(project_id,delOrRecover) {
            projectManage.delete(project_id,delOrRecover).then((data) => {
                if (this.page === 'Home') {
                    this.GetCardData('All')
                } else if (this.page == 'Starred') {
                    this.GetCardData('collect')
                } else {
                    this.GetCardData('delete')
                }
            })
        },
        //修改项目
        handleModifyCard(project_id, title, introduction) {
            projectManage
                .modify(project_id, title, introduction)
                .then((data) => {
                    if (this.page === 'Starred') {
                        this.GetCardData('collect')
                    } else if (this.page === 'Home') {
                        this.GetCardData('All')
                    }
                })
        },
        //查看各个界面的项目
        detail(text) {
            if (text === 'Home') {
                projectManage.page = 'Home'
                this.GetCardData('All')
                this.detailType = true
            } else if (text === 'Starred') {
                this.GetCardData('collect')
                projectManage.page = 'Starred'
                this.detailType = false
            } else {
                this.GetCardData('delete')
                projectManage.page = 'Trash'
                this.detailType = false
            }
        },
        //搜索项目
        search() {
            projectManage.search(this.searchContent, this.page).then((data) => {
                this.CardData = data.projects
            })
        },
        //永久删除项目
        handleStrikeoutCard() {
            projectManage
                .modify(project_id, title, introduction)
                .then((data) => {
                    if (this.page === 'Starred') {
                        this.GetCardData('collect')
                    } else if (this.page === 'Home') {
                        this.GetCardData('All')
                    }
                })
        },
        // 跳转 Design 界面
        toDesignPage(project_id) {
            // // 向后端获取 globalDomTreee 与 domTreeMap 的信息
            this.designStore.project_id = project_id
            this.designStore.getPageCode(project_id).then((data) => {
                this.designStore.loadDom(
                    data['project'][0]['domTreeMap'],
                    data['project'][0]['count']
                )
                this.designStore.editCss = true
                this.$router.push('/project/design')
            })
        }
    },
    created() {
        this.GetCardData('All')
    }
}
</script>
